<template>
	<view>
		<view class="logo_img">
			<image src="../../../static/icon/default/ic_launcher.png" mode=""></image>
		  </view>
		  <view class="input_content">
		    <view class="login_phone">
		     <m-input class="m-input" type="text" clearable focus v-model="account" placeholder="请输入手机号"></m-input>
		    </view>
		    <view class="login_phone">
		    <m-input type="password"  v-model="passWord" placeholder="请输入密码"></m-input>
		    </view>
		  </view>
		
		  <view class="login_button">
		    <button @click="login">登&nbsp;&nbsp;录</button>
		  </view>
		  <!--    <view class="agree">-->
		  <!--        <view class="input"><input name="agree" type="radio"/></view>-->
		  <!--        <p>我已阅读并同意<a><span>《用户服务协议及隐私协议》</span></a></p>-->
		  <!--    </view>-->
		  <view class="bottom">
		    <view class="another">
		      <!--            <img src="../../static/img/WeChat.png">-->
		 <navigator url="../login/login">验证码登录</navigator>
		 
		    </view>
		  </view>
	</view>
</template>

<script>
	
	import {
		LOGIN_BY_PASSWORD,
	} from '@/store/mutation-types.js'
	
	export default {
		data() {
			return {
				account:'',
				passWord:'',
			}
		},
		onNavigationBarButtonTap() {
		       uni.navigateTo({
		        url:"../register/register"
		       })
		    }  ,
		methods: {
				login() {
				    const app = this;
				    const phone_number = app.account;
				    const password = app.passWord;
				    const data = {
				        "phoneNumber": phone_number,
				        "password": password,
				    }
				    const success = function (result) {
				    	if (result.error == "0") {
				    		app.$toast("登录成功！");
				    		uni.setStorageSync("user", JSON.stringify(result.data));
				    		uni.setStorageSync("token", result.token);
				    		uni.switchTab({
				    			url:`/pages/blog/blog`
				    		})
				    	} else {
				    		app.$toast(result.error);
				    	}
				    };
				    console.log(data)
				    this.$store.dispatch(`user/${LOGIN_BY_PASSWORD}`,{
				    	data,
				    	onSuccess:success
				    })
				}
			}
	}		
</script>

<style>

.mint-header {
    padding: 10px 0;
    height: 3.5rem;
}

.mint-header-title {
    font-weight: bolder;
    font-size: 1.2rem;
    /*font-family: 微软雅黑;*/
}

.mint-header-button.is-left {
    text-align: center;
}

.logo_img {
    text-align: center;
    padding: 75rpx 0;
}

.logo_img image {
    height: 125rpx;
	width: 125rpx;
}

.input_content {
    margin: 0.5rem auto 0;
    background: #f4f4f4;
    width: 80%;
    border-radius: 1rem;
}

.input_content .login_phone {
    border-bottom: 1px solid #aaaaaa;
    height:120rpx;
    line-height: 91.34rpx;
    background: #fff;
}

.input_content .login_phone img {
    height: 2.2rem;
    width: 2rem;
    padding: 0.65rem 1rem;
    float: left;
}

.input_content .login_phone input {
    -web-kit-appearance: none;
    -moz-appearance: none;
    font-size: 18px;
    height: 120rpx;
    border: none;
    color: #6a6f77;
    width: 100%;
}

.input_content .login_identify {
    /*border-bottom: 1px solid #aaaaaa;*/
    height: 3.5rem;
    border-radius: 0 0 1rem 1rem;
    line-height: 3.5rem;
}

.input_content .login_identify img {
    height: 2.2rem;
    width: 2rem;
    padding: 0.65rem 1rem;
    float: left;
}

.input_content .login_identify input {
    -web-kit-appearance: none;
    -moz-appearance: none;
    font-size: 1.1rem;
    height: 2em;
    border: none;
    color: #6a6f77;
    background: #f4f4f4;
}

.get_identify button {
    float: right;
    margin-right: 3rem;
    color: #ff5a48;
    font-size: 0.9rem;
    background-color: Transparent;
    border: none;
    outline: none;
}

.login_button {
    margin-top: 3rem;
    text-align: center;
}

.login_button button {
    background: #ff5a48;
    width: 520rpx;
    height: 100rpx;
    text-align: center;
    font-size: 20px;
    color: white;
    border: none;
    border-radius: 5px;
}

.agree {
    padding: 2rem 0;
    margin-left: 17%;
    display: flex;
}

.agree .input {
    flex: 0.01;
}

.agree p {
    margin-top: 0.1rem;
    font-size: 0.8em;
    color: #6a6f77;
    flex: 1;
}

.agree p span {
    color: #ff9800;
}

.line {
    /*padding: 0rem auto;*/
    display: flex;
    text-align: center;
    /*position: fixed;*/
    /*bottom: 3rem;*/
}

.line .one_hr {
    /*height: 0.1rem;*/
    margin-top: 1rem;
    margin-left: 1rem;
    flex: 0.8;
}

.line .font {
    flex: 1;
}

.line .two_hr {
    /*height: 0.1rem;*/
    margin-top: 1rem;
    margin-right: 1rem;
    flex: 0.8;
}

.another {
    margin-bottom: 2rem;
    margin-top: 0.5rem;
    text-align: right;
    margin-right: 10%;
}

.another img {
    width: 2rem;
    height: 2rem;
    float: left;
    margin-left: 30%;
}

.another uni-navigator {
   
    color: #ff5a48;
   font-size: 18px;
    margin-top: 0.2rem;
	padding: 0.5rem;
}

.bottom {
    width: 100%;
    bottom: 0rem;
    left: 0rem;
}

</style>
